<template>
  <div class="account-security">
    <el-card class="security-card">
      <template #header>
        <div class="card-header">
          <h3>账户安全</h3>
          <el-button @click="$router.back()">返回</el-button>
        </div>
      </template>

      <div class="security-content">
        <!-- 安全概览 -->
        <div class="security-overview">
          <h4>安全概览</h4>
          <div class="overview-content">
            <div class="security-score">
              <div class="score-circle">
                <el-progress 
                  type="circle" 
                  :percentage="securityScore" 
                  :color="getScoreColor(securityScore)"
                  :width="100"
                >
                  <template #default="{ percentage }">
                    <span class="score-text">{{ percentage }}</span>
                  </template>
                </el-progress>
              </div>
              <div class="score-info">
                <h5>安全评分</h5>
                <p class="score-level" :class="getScoreLevelClass(securityScore)">
                  {{ getScoreLevelText(securityScore) }}
                </p>
                <p class="score-desc">{{ getScoreDescription(securityScore) }}</p>
              </div>
            </div>
          </div>
        </div>

        <el-divider></el-divider>

        <!-- 安全设置项 -->
        <div class="security-settings">
          <h4>安全设置</h4>
          
          <!-- 登录密码 -->
          <div class="setting-item">
            <div class="setting-info">
              <div class="setting-icon">
                <el-icon size="24" color="#409eff"><Lock /></el-icon>
              </div>
              <div class="setting-details">
                <h5>登录密码</h5>
                <p>定期更换密码可以提高账户安全性</p>
                <p class="setting-status">
                  <span>密码强度：</span>
                  <el-tag :type="passwordStrengthType" size="small">{{ passwordStrengthText }}</el-tag>
                </p>
              </div>
            </div>
            <div class="setting-action">
              <el-button type="primary" @click="$router.push('/user/profile/changePassword')">
                修改密码
              </el-button>
            </div>
          </div>

          <!-- 手机绑定 -->
          <div class="setting-item">
            <div class="setting-info">
              <div class="setting-icon">
                <el-icon size="24" color="#67c23a"><Iphone /></el-icon>
              </div>
              <div class="setting-details">
                <h5>手机绑定</h5>
                <p>绑定手机号用于接收安全通知和找回密码</p>
                <p class="setting-status">
                  <span>当前手机：</span>
                  <span>{{ phoneInfo.masked || '未绑定' }}</span>
                </p>
              </div>
            </div>
            <div class="setting-action">
              <el-button v-if="!phoneInfo.bound" type="primary" @click="bindPhone">
                绑定手机
              </el-button>
              <el-button v-else @click="changePhone">
                更换手机
              </el-button>
            </div>
          </div>

          <!-- 实名认证 -->
          <div class="setting-item">
            <div class="setting-info">
              <div class="setting-icon">
                <el-icon size="24" color="#e6a23c"><User /></el-icon>
              </div>
              <div class="setting-details">
                <h5>实名认证</h5>
                <p>完成实名认证可享受更多服务和更高的安全保障</p>
                <p class="setting-status">
                  <span>认证状态：</span>
                  <el-tag v-if="idCardInfo.verified" type="success" size="small">已认证</el-tag>
                  <el-tag v-else type="info" size="small">未认证</el-tag>
                </p>
              </div>
            </div>
            <div class="setting-action">
              <el-button v-if="!idCardInfo.verified" type="primary" @click="verifyIdCard">
                立即认证
              </el-button>
              <el-button v-else disabled>
                已认证
              </el-button>
            </div>
          </div>

          <!-- 驾驶证认证 -->
          <div class="setting-item">
            <div class="setting-info">
              <div class="setting-icon">
                <el-icon size="24" color="#f56c6c"><Document /></el-icon>
              </div>
              <div class="setting-details">
                <h5>驾驶证认证</h5>
                <p>上传驾驶证信息以便使用租车服务</p>
                <p class="setting-status">
                  <span>认证状态：</span>
                  <el-tag v-if="driverLicenseInfo.verified" type="success" size="small">已认证</el-tag>
                  <el-tag v-else type="info" size="small">未认证</el-tag>
                </p>
              </div>
            </div>
            <div class="setting-action">
              <el-button v-if="!driverLicenseInfo.verified" type="primary" @click="verifyDriverLicense">
                立即认证
              </el-button>
              <el-button v-else disabled>
                已认证
              </el-button>
            </div>
          </div>
        </div>

        <el-divider></el-divider>

        <!-- 安全建议 -->
        <div class="security-suggestions" v-if="suggestions.length > 0">
          <h4>安全建议</h4>
          <div class="suggestions-list">
            <div v-for="suggestion in suggestions" :key="suggestion.id" class="suggestion-item">
              <div class="suggestion-content">
                <el-icon class="suggestion-icon" :color="getSuggestionColor(suggestion.priority)">
                  <Warning />
                </el-icon>
                <div class="suggestion-text">
                  <h6>{{ suggestion.title }}</h6>
                  <p>{{ suggestion.description }}</p>
                </div>
              </div>
              <div class="suggestion-action">
                <el-button size="small" type="primary" @click="handleSuggestion(suggestion)">
                  {{ suggestion.actionText }}
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 安全日志 -->
        <div class="security-logs">
          <h4>最近安全活动</h4>
          <div class="logs-list">
            <div v-for="log in securityLogs" :key="log.id" class="log-item">
              <div class="log-info">
                <div class="log-type">
                  <el-icon :color="getLogTypeColor(log.type)">
                    <component :is="getLogTypeIcon(log.type)" />
                  </el-icon>
                </div>
                <div class="log-details">
                  <p class="log-action">{{ log.action }}</p>
                  <p class="log-time">{{ formatTime(log.time) }}</p>
                  <p class="log-location" v-if="log.location">{{ log.location }}</p>
                </div>
              </div>
              <div class="log-status">
                <el-tag :type="log.success ? 'success' : 'danger'" size="small">
                  {{ log.success ? '成功' : '失败' }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Lock, Iphone, User, Document, Warning, Check, Close } from '@element-plus/icons-vue'
// import { getSecurityInfo, getSecurityLogs } from '@/api/userProfile'

const router = useRouter()

// 数据
const securityScore = ref(65)

// 安全信息
const phoneInfo = reactive({
  bound: true,
  masked: '138****5678'
})

const idCardInfo = reactive({
  verified: false
})

const driverLicenseInfo = reactive({
  verified: false
})

const passwordStrengthType = ref('warning')
const passwordStrengthText = ref('中等')

// 安全建议
const suggestions = ref([
  {
    id: 1,
    title: '完成实名认证',
    description: '实名认证可以提高账户安全性，享受更多服务',
    priority: 'high',
    actionText: '立即认证',
    action: 'verify_id_card'
  },
  {
    id: 2,
    title: '增强密码强度',
    description: '建议使用包含大小写字母、数字和特殊字符的复杂密码',
    priority: 'medium',
    actionText: '修改密码',
    action: 'change_password'
  }
])

// 安全日志
const securityLogs = ref([
  {
    id: 1,
    type: 'login',
    action: '账户登录',
    time: new Date('2024-01-15 10:30:00'),
    location: 'IP: 192.168.1.100 (北京)',
    success: true
  },
  {
    id: 2,
    type: 'password',
    action: '密码修改',
    time: new Date('2024-01-10 15:20:00'),
    location: 'IP: 192.168.1.100 (北京)',
    success: true
  },
  {
    id: 3,
    type: 'login',
    action: '登录尝试',
    time: new Date('2024-01-08 09:15:00'),
    location: 'IP: 203.0.113.1 (未知)',
    success: false
  }
])

// 方法
const loadSecurityInfo = async () => {
  try {
    // 模拟加载安全信息
    // const response = await getSecurityInfo({ userId: '1' })
    
  } catch (error) {
    console.error('加载安全信息失败:', error)
  }
}

const getScoreColor = (score) => {
  if (score >= 80) return '#67c23a'
  if (score >= 60) return '#e6a23c'
  return '#f56c6c'
}

const getScoreLevelClass = (score) => {
  if (score >= 80) return 'high'
  if (score >= 60) return 'medium'
  return 'low'
}

const getScoreLevelText = (score) => {
  if (score >= 80) return '高'
  if (score >= 60) return '中'
  return '低'
}

const getScoreDescription = (score) => {
  if (score >= 80) return '您的账户安全性很高，请继续保持'
  if (score >= 60) return '您的账户安全性一般，建议完善安全设置'
  return '您的账户安全性较低，请尽快完善安全设置'
}

const getSuggestionColor = (priority) => {
  const colorMap = {
    'high': '#f56c6c',
    'medium': '#e6a23c',
    'low': '#909399'
  }
  return colorMap[priority] || '#909399'
}

const getLogTypeColor = (type) => {
  const colorMap = {
    'login': '#409eff',
    'password': '#67c23a',
    'profile': '#e6a23c'
  }
  return colorMap[type] || '#909399'
}

const getLogTypeIcon = (type) => {
  const iconMap = {
    'login': 'User',
    'password': 'Lock',
    'profile': 'Edit'
  }
  return iconMap[type] || 'Document'
}

const formatTime = (time) => {
  const date = new Date(time)
  return date.getFullYear() + '-' + 
         String(date.getMonth() + 1).padStart(2, '0') + '-' + 
         String(date.getDate()).padStart(2, '0') + ' ' +
         String(date.getHours()).padStart(2, '0') + ':' + 
         String(date.getMinutes()).padStart(2, '0')
}

const bindPhone = () => {
  ElMessage.info('手机绑定功能开发中')
}

const changePhone = () => {
  ElMessage.info('更换手机功能开发中')
}

const verifyIdCard = () => {
  ElMessage.info('实名认证功能开发中')
}

const verifyDriverLicense = () => {
  ElMessage.info('驾驶证认证功能开发中')
}

const handleSuggestion = (suggestion) => {
  switch (suggestion.action) {
    case 'verify_id_card':
      verifyIdCard()
      break
    case 'change_password':
      router.push('/user/profile/changePassword')
      break
    default:
      ElMessage.info('功能开发中')
  }
}

// 初始化
onMounted(() => {
  loadSecurityInfo()
})
</script>

<style scoped>
.account-security {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.security-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  color: #303133;
}

.security-content {
  padding: 20px 0;
}

.security-overview h4,
.security-settings h4,
.security-suggestions h4,
.security-logs h4 {
  margin-bottom: 20px;
  color: #303133;
}

.overview-content {
  display: flex;
  justify-content: center;
}

.security-score {
  display: flex;
  align-items: center;
  gap: 30px;
}

.score-circle {
  text-align: center;
}

.score-text {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.score-info h5 {
  margin: 0 0 10px 0;
  color: #303133;
}

.score-level {
  font-size: 18px;
  font-weight: bold;
  margin: 5px 0;
}

.score-level.high {
  color: #67c23a;
}

.score-level.medium {
  color: #e6a23c;
}

.score-level.low {
  color: #f56c6c;
}

.score-desc {
  color: #606266;
  margin: 0;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.setting-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 50%;
}

.setting-details h5 {
  margin: 0 0 5px 0;
  color: #303133;
}

.setting-details p {
  margin: 5px 0;
  color: #606266;
  font-size: 14px;
}

.setting-status {
  display: flex;
  align-items: center;
  gap: 5px;
}

.suggestions-list,
.logs-list {
  space-y: 15px;
}

.suggestion-item,
.log-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 15px;
}

.suggestion-content,
.log-info {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.suggestion-icon {
  font-size: 20px;
}

.suggestion-text h6 {
  margin: 0 0 5px 0;
  color: #303133;
}

.suggestion-text p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.log-type {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
}

.log-details p {
  margin: 2px 0;
  font-size: 14px;
}

.log-action {
  color: #303133;
  font-weight: 500;
}

.log-time,
.log-location {
  color: #909399;
}
</style>
